<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>蘑菇网-你的专业导购</title>
    <meta name="Keywords" content="蘑菇网,女装,时尚潮流,网上购物"/>
    <meta name="Description" content="蘑菇网-成立于2016年底，横空而降的专业女装导购网站，您的信赖，是我们从事的唯一标准。"/>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
          name="viewport">
    <!-- Mobile Devices Support @begin -->
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <!-- Mobile Devices Support @end -->
    <link href="../css/index.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link href="../css/swiper.min.css" rel="stylesheet"/>
    <script src="../script/jquery-1.9.1.min.js"></script>
    <script src="../script/main.js"></script>
    <script src="../script/jquery.rotate.min.js"></script>
    <script src="../script/jQuery-jcMarquee.js"></script>
    <script src="../script/swiper.min.js"></script>
    <script src="../script/api.js"></script>
    <script src="../script/settings.js"></script>
    <script src="../script/vue.js"></script>
    <script src="../script/axios.js"></script>
</head>

<body>
<div class="main" id="app">
    <!--头部-->
    <div class="header" id="bktop">
        <div class="logo">
            <a href=""><img :src="siteconfig.logo"/></a>
        </div>
        <div class="banner">
            <div class="close"><img id="img1" src="../image/banner01.gif"/></div>
            <div class="open hide"><img id="img2" src="../image/banner02.gif"/></div>
            <ul class="xla">
                <li v-for="top in nav_list">
                    <a class="dianj dj1"><font>{{top.name}}</font><img id="ig1" src="../image/xiala.gif"/></a>
                    <div class="zilan">
                        <a v-for="son in top.children_list" @click="open_the_window(son.name,son.link)">{{son.name}}</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearBoth"></div>
    </div>
    <!--滚动图-->
    <div id="main">
        <div class="home-device">
            <a class="arrow-left" href="#"></a>
            <a class="arrow-right" href="#"></a>
            <div class="swiper-main">
                <div class="swiper-container swiper1">
                    <div class="swiper-wrapper">
                        <div v-for="banner in banner_list" class="swiper-slide">
                            <a href="">
                                <img :src="banner.image_url" width="100%" height="200px">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dian">
            <div class="pagination pagination1"></div>
        </div>
    </div>
    <div class="news">
        <!--滚动公告-->
        <div class="gongao">
            <div class="laba"><img src="../image/gongao.gif"/></div>
            <div class="wenzi" id="mrq">
                <div id="Marquee_x">
                    <ul>
                        <li>
                            <div>{{siteconfig.phrase}}</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clearBoth"></div>
        </div>
        <!--潮流新品-->
        <h2 class="floor-title">今日"心"品</h2>
        <div class="case_list">
            <div class="case_list_body case_list_body2">
                <ul>
                    <li :key="key" v-for="goods,key in goods_list" :class="key%2==0?'yyu':'casela'">
                        <a href="">
                            <div class="case_list_body_pic">
                                <img :src="goods.image_url">
                            </div>
                        </a>
                        <div class="case_list_info">
                            <p class="cast_list_tit"><a
                                    @click="open_the_goods('goods_'+goods.id,'./product.html',goods.id)">{{goods.title}}</a>
                            </p>
                        </div>
                    </li>
                    <div class="clearBoth"></div>
                </ul>
            </div>
        </div>
        <!--资讯列表-->
        <h2 class="floor-title">潮流资讯</h2>
        <div class="newslist">
            <div v-for="news in news_list" class="qtao">
                <div class="mg">
                    <div class="mgl"><img :src="news.image_url" width="100%"/></div>
                    <div class="mgr">
                        <h3>{{news.title}}</h3>
                        <div class="what">
                            <div class="time">
                                <div class="tub"><img src="../image/time.gif"/></div>
                                <div class="shij">{{news.create_time|dateFormat}}</div>
                                <div class="clearBoth"></div>
                            </div>
                            <div class="time hit">
                                <div class="tub"><img src="../image/hit.gif"/></div>
                                <div class="shij">{{news.read_count}}</div>
                                <div class="clearBoth"></div>
                            </div>
                            <div class="clearBoth"></div>
                        </div>
                        <div class="jianj">{{news.descript}}</div>
                        <div class="ydu">
                            <div class="anniu">
                                <a href=""><img src="../image/ydu.gif"/></a>
                            </div>
                            <div class="clearBoth"></div>
                        </div>
                    </div>
                    <div class="clearBoth"></div>
                </div>
            </div>
        </div>
    </div>
    <!--底部-->
    <div class="bottom">
        <div class="bottom-top">
            <div class="linker">
                <div class="liuy">
                    <a href="">
                        <div class="tubiao"><img src="../image/liuy.gif"/></div>
                        <div class="wenzi">在线留言</div>
                        <div class="clearBoth"></div>
                    </a>
                </div>
                <div class="clearBoth"></div>
            </div>
        </div>
        <div class="bottom-bot">{{siteconfig.copyright}}</div>
    </div>
</div>
<script>
    apiready = function () {
        vm = new Vue({
            el: '#app',
            data: {
                siteconfig: {}, //站点配置
                banner_list: [], //轮播广告
                nav_list: [     //导航菜单
                    {children_list: []},
                    {children_list: []},
                    {children_list: []},
                ],
                goods_list: [], //每日‘心’品
                news_list: [],  //潮流资讯
            },
            created() {
                this.get_site_config();
                this.get_banner_list();
                this.get_nav_list();
                this.get_home_goods();
                this.get_home_news();
            },
            methods: {
                //获取站点配置信息
                get_site_config() {
                    axios.post(settings.API, {
                        'jsonrpc': '2.0',
                        'method': 'common.siteconfig',
                        'params': {},
                        'id': 1
                    }).then(response => {
                        this.siteconfig = response.data.result;
                    }).catch(error => {
                        alert(error.response)
                    })
                },
                // 获取轮播广告
                get_banner_list() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "method": "common.banner",
                        "params": {},
                        "id": 1
                    }).then(response => {
                        this.banner_list = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 获取导航菜单
                get_nav_list() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "method": "common.nav",
                        "params": {},
                        "id": 1
                    }).then(response => {
                        this.nav_list = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 每日"心"品
                get_home_goods() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "method": "goods.home_goods",
                        "params": {},
                        "id": 1
                    }).then(response => {
                        this.goods_list = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 潮流资讯
                get_home_news() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "method": "news.home_news",
                        "params": {},
                        "id": 1
                    }).then(response => {
                        this.news_list = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 打开窗口进行页面跳转
                open_the_window(name, link_str) {
                    alert('openthewindow')
                    link = JSON.parse(link_str);
                    api.openWin({
                        name: name,  // 必须定义一个窗口名称，方便后面操作这个窗口
                        url: link.url,
                        pageParam: link.params
                    })
                },
                open_the_goods(name, link, id) {
                    api.openWin({
                        name: name,  // 必须定义一个窗口名称，方便后面操作这个窗口
                        url: link,
                        pageParam: {id: id}
                    })
                },
            },
            filters: {
                dateFormat(time) {
                    return new Date(time).toLocaleDateString().replace("/", "-").replace("/", "-")
                }
            }
        });
        $(function () {
            setTimeout(() => {
                $('#Marquee_x').jcMarquee({'marquee': 'x', 'margin_right': '300px', 'speed': 20});
                var swiper = new Swiper('.swiper1', {
                    pagination: '.pagination1',
                    loop: true,
                    paginationClickable: true,
                    autoplay: 5000,
                    grabCursor: true,
                    autoHeight: true,
                });
            }, 1000)
        })
    };
</script>
</body>

</html>
